<template>
  <div id="app">
      <div class="content">
          <div class="content_child1">
              <div id="myImg">
                  <img :src='myimg' alt=""  @mousemove="move()">
                  <!-- <img src="../../assets/contact/img/contact_1.jpg" alt="" @mousemove="move()"> -->
                  <span></span>
              </div>
              <div id="Right">
                  <img img :src='myimg' alt="" >
                  <!-- <img src="../../assets/contact/img/contact_1.jpg" alt="" > -->
              </div>
              <div class="myImgRight">
                  <p class="detailTitle">
                      <!-- {{this.DetailX.itemTitleId.itemTitleName}} -->
                  </p>
                  <p class="detail_Explain">
                      <span class="identifier">编号：{{this.DetailX.itemId}}</span>
                      <span>销量：{{this.DetailX.stock}}</span>
                  </p>
                  <p class="price">￥{{this.DetailX.price}}</p>
                  <div class="detailImgs">
                      <div class="detailImgs_childs" v-for="(items,index) in mydetail[0].detailImgs " :key="index"  @click="qieHuan(index)">
                          <img :src="items" alt="">
                      </div>
                  </div>
                  <div class="myImgRight_bottom">
                      <div>
                          <span>材质</span>
                          <span :title="mydetail[0].material" class=" FK block ">{{mydetail[0].material}}</span>
                      </div>
                      <div class="mycolor_Father">
                          <span class="mycolor">颜色</span>
                          <span :title="this.DetailX.color" class="FK block2" ref="mycolor"></span>
                      </div>
                      <div>
                          <span>规格</span>
                          <span class="FK block3" v-for="(items,index) in DetailX" :key="index"  @click="changeover(index)">{{this.DetailX.size}}</span>
                          <!-- <span class="FK block3" v-for="(items,index) in mydetail" :key="index"  @click="changeover(index)">{{items.Specifications}}</span> -->
                        
                      </div>
                      <div style="margin-top: 10px">
                          <span>数量</span>
                          <!-- <button class="Reduce">-</button> -->
                          <input type="number" class="Num" v-model.lazy='myNumber'>
                          <!-- <button class="Plus">+</button> -->
                          <span class="piece">件</span>
                      </div>
                       <div style="margin-top: 10px">
                          <button class="buy" @click="buy">立即购买</button>
                          <button class="add" @click="addCart">加入购物车</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="xiangqing">
             <p class="XQ_title">商品详情</p>
              <div class="Tab">
                  <span class="Tab_a">商品系列</span>
                  <span class="Tab_b">{{mydetail[0].series}}</span>
                  <span class="Tab_a">商品名称</span>
                  <span class="Tab_b">{{mydetail[0].detailTitle}}</span>
                  <span class="Tab_a">商品货号</span>
                  <span class="Tab_b">{{mydetail[0].item_Id}}</span>
              </div>
              <div class="Tab" style="margin-top: 10px">
                  <span class="Tab_a">材质</span>
                  <span class="Tab_b">{{mydetail[0].material}}</span>
                  <span class="Tab_a" >规格</span>
                  <span class="Tab_b">{{mydetail[0].Specifications}}</span>
                  <span class="Tab_a">风格</span>
                  <span class="Tab_b">{{mydetail[0].style}}</span>
              </div>
              <div class="ExplainXQ_father">
                  <p v-for="(item,index) in ExplainWJ" :key="index" class="ExplainXQ">
                      {{item}}
                  </p>
              </div>
              <!--//这里写接下来的-->
          </div>
      </div>
      <Footer></Footer>
  </div>
</template>
<script>
import Footer from '../../components/Footer.vue';
export default {
  name: 'App',
    data(){
      return{
        imgurl:require('../../assets/contact/img/contact_1.jpg'),
        //模拟数据
        mydetail:[
            {detailTitle:'Wink 皇冠金属摆件',
            detailImgs:[require('../../assets/contact/img/contact_1.jpg'),
            require('../../assets/contact/img/contact_2.jpg'),
            require('../../assets/contact/img/contact_3.jpg')],
            item_Id:114836,
            detailSales:244,
            price:105,
            material:"黄铜",
            colors:"pink",
            Specifications:"长16.5*宽6*高18.5cm",
            series:"Wink",
            style:"个性混搭",
            Explain:"Wink系列，以黄铜打造趣味摆件，帮助点亮家中沉闷角落。此系列有两种造型可供选择。*选用优质黄铜，耐蚀耐磨，方便清洁*皇冠造型生动有趣，内部可收纳小物，美观又实用。",
            ExplainWJ:'',
            },
            {detailTitle:'Pink 皇冠金属摆件',
            detailImgs:[require('../../assets/contact/img/contact_1.jpg'),
            require('../../assets/contact/img/contact_2.jpg'),
            require('../../assets/contact/img/contact_3.jpg')],
            item_Id:114839,
            detailSales:245,
            price:119,
            material:"黑铁",
            colors:"black",
            Specifications:"长16.5*宽7*高20.5cm",
            series:"Wink",
            style:"个性混搭",
            Explain:"Wink系列，以黄铜打造趣味摆件，帮助点亮家中沉闷角落。此系列有两种造型可供选择。*选用优质黄铜，耐蚀耐磨，方便清洁*皇冠造型生动有趣，内部可收纳小物，美观又实用。",
            ExplainWJ:'',
            }
        ],
        myimg:'',
        myNumber:1,
        mydatas:{bianhao:'',jiage:'',xiaoliang:''},
        wds:[],
        DetailX:[]
      }
    },
  created(){
       let token=localStorage.getItem("token");
       console.log(token);

       this.ExplainWJ=this.mydetail[0].Explain.split("*");
       this.axios.defaults.headers['content-type'];
       this.myimg=this.mydetail[0].detailImgs[0];
       this.mydatas.bianhao=this.mydetail[0].item_Id;
       this.mydatas.jiage=this.mydetail[0].price;
       this.mydatas.xiaoliang=this.mydetail[0].detailSales;

    //    console.log(location);
       this.wds=Number(window.location.search);
    //    console.log(window.location.search);
       console.log(typeof(this.wds));
       
       this.axios.get("http://129.28.184.223:8080/itemDetail/selectOne",{
        headers:{
            'token':token
        },
        params:{
            id:1
        }  
       })
       .then((res)=>{
           this.DetailX=res.data
           console.log(res)
           console.log(this.DetailX)
       }).catch((err)=>{
           console.log(err)
       })     
    },

    mounted(){
        this.colors();
        
    },

  components: {
      Footer
  },

  watch: {
    myNumber(val){
        console.log(val)
        if(val<=0){
            this.myNumber=1
        }else if(val>=9999){
            this.myNumber=9999
        }
    }  
  },

    methods:{
        qieHuan(e){
            console.log(e);
            this.Dex=e;
           if(e==0){
            this.myimg=this.mydetail[0].detailImgs[0]
           }else if(e==1){
           this.myimg=this.mydetail[0].detailImgs[1]
           }else if(e==2){
           this.myimg=this.mydetail[0].detailImgs[2]
           }
        },

        colors(){
            
            this.$refs.mycolor.style.backgroundColor=this.DetailX.color
        },

        changeover(index){
            this.mydatas.bianhao=this.mydetail[index].item_Id;
            this.mydatas.xiaoliang=this.mydetail[index].detailSales;
            this.mydatas.jiage=this.mydetail[index].price;
            // console.log(this.mydetail[index].item_Id)
        },

        move(){
            var oLeft=document.getElementById('myImg');
            var oSpan=document.querySelector('#myImg span');
            var oRight=document.getElementById('Right');
            var oImg=document.querySelector('#Right img');
            oLeft.onmouseover=function () {
                oSpan.style.display='block';
                oRight.style.display='block';
            };
             //移除消失
            oLeft.onmouseout=function () {
                oSpan.style.display='none';
                oRight.style.display='none';
            };
            //在左边移动
            oLeft.onmousemove=function () {

                var l=event.clientX-oSpan.offsetWidth/2-oLeft.offsetLeft-130;
                var t=event.clientY-oSpan.offsetHeight/2-oLeft.offsetTop-50;
                
                if(l<=0){
                    l=0
                }else if(l>=oLeft.offsetWidth-oSpan.offsetWidth){
                    l=oLeft.offsetWidth-oSpan.offsetWidth
                }
                
                if(t<=0){
                    t=0
                }else if(t>=oLeft.offsetHeight-oSpan.offsetHeight){
                    t=oLeft.offsetHeight-oSpan.offsetHeight
                }
                
                
                oSpan.style.left=l+'px';
                oSpan.style.top=t+'px';

                oImg.style.left=-l*(oImg.offsetWidth-oRight.offsetWidth)/(oLeft.offsetWidth-oSpan.offsetWidth)+'px'
                oImg.style.top=-t*(oImg.offsetHeight-oRight.offsetHeight)/(oLeft.offsetHeight-oSpan.offsetHeight)+'px'

            }
        }, 
        
       buy(){
        //  this.$router.push({path:'http://localhost:8080/order.html'})
        window.open('order.html')
        localStorage.itemId=this.DetailX.itemId;
        localStorage.price=this.DetailX.price;
        localStorage.color=this.DetailX.color;
        localStorage.num=this.myNumber;
       },

       
        addCart(){
            window.open('ShoppingCart.html');
            localStorage.num=this.myNumber;
            localStorage.shop=this.DetailX
        },

    },
}
</script>

<style lang="less">
@import '../../theme/style.less';

  *{
      margin: 0;
      padding: 0;
   }


   #app{
      margin: 0 auto;
      height: 1500px;
      width: 1366px;
      margin-top: 50px;
   }
   .content{
       padding: 0 60px;
   }
   .content_child1{
       height: 618px;
       margin-bottom: 40px;
       position: relative;
   }
   #myImg{
    //    float: left;
       position: absolute;
       left: 0;
       top: 0;
       height: 618px;
       width: 618px;
    //    border: 1px solid #818181;
   }
   #myImg span{
        width: 200px;
        height: 200px;
        background: rgba(255,0,255,0.3);
        position: absolute;
        left: 0;
        top: 0;
        display: none;
   }
   #myImg img{
       width: 100%;
       height: 100%;
   }
   .myImgRight{
    //    float: left;
       position: absolute;
       top: 0px;
       left: 718px;
       height: 618px;
       width: 480px;
    //    margin-left: 100px;
   }
   .detailTitle{
       padding-top: 15px;
       font-size: 17px;
       padding-bottom: 5px;
   }
   .detail_Explain{
       font-size: 14px;
       color: #646566;
       padding-bottom: 5px;
   }
    .identifier{
        margin-right: 20px;
    }
    .price{
        font-size: 16px;
    }
    .detailImgs{
        height: 81px;
        margin-top: 10px;
        margin-bottom: 50px;
    }
    .detailImgs_childs{
        height: 80px;
        width: 80px;
        border: 1px solid rgb(233, 230, 230);
        margin-right: 5px;
        float: left;
        cursor: pointer;
    }
    .detailImgs_childs:hover{
        border: 1px solid black;
    }
    .detailImgs_childs img{
        width: 100%;
        height: 100%;
    }
    #myImgRight_bottom{
        color: #646566;
        font-size: 14px;
    }
    .FK{
        display: inline-block;
        cursor: pointer;
        color: black;
        margin-left: 10px;
        border: 1px solid rgb(233, 230, 230);
    }
    .FK:hover{
        border: 1px solid black;
    }
    .block{
        border: 1px solid rgb(233, 230, 230);
        height: 26px;
        width: 46px;
        line-height: 26px;
        text-align: center;
        font-size: 13px;
    }
    .block2{
        height: 31px;
        width: 31px;
        float: left;
        // background: pink;
    }
    .mycolor{
        padding-top: 6px;
        float: left;
    }
    .mycolor_Father{
        margin-top: 10px;
        height: 40px;

    }
    .block3{
        border: 1px solid rgb(233, 230, 230) ;
        height: 26px;
        line-height: 26px;
        padding: 0 10px;
        font-size: 13px;
    }
    .Num{
        height: 24px;
        width: 60px;
        border: 1px solid rgb(233, 230, 230);
        text-align: center;
        font-size: 12px;
        margin-left: 10px;
    }
    .Reduce{
        margin-left: 10px;
        height: 26px;
        width: 26px;
        border: 1px solid rgb(233, 230, 230);
        font-size: 12px;
    }
    .Reduce:hover{
        background: #dddddd;
    }
    .Plus{
        height: 26px;
        width: 26px;
        border: 1px solid rgb(233, 230, 230); 
        font-size: 12px;
    }
    .Plus:hover{
        background: #dddddd;
    }
    .piece{
        margin-left: 10px;
    }
    .XQ_title{
        padding-bottom: 5px;
        font-size: 16px;
        border-bottom: 1px solid #d1d3d4;
        margin-bottom: 30px;
    }
    .Tab{
        border-bottom: 1px #d1d3d4 dashed;
        padding-bottom: 5px;
        padding-left: 10px;
        font-size: 15px;
    }
    .Tab_a{
        display: inline-block;
        font-weight: bolder;
        width: 90px;
    }
    .Tab_b{
        display: inline-block;
        width:310px;
    }
    .ExplainXQ{
        font-size: 15px;
        margin: 5px 0;
    }
    .ExplainXQ_father{
        padding-top: 15px;
        padding-bottom: 30px;
    }
    .buy{
        background-color: #ffe4d0;
        width: 100px;
        height: 35px;
        color: #e5511d;
        border: 1px solid #f0cab6;
        border-radius: 2px;
    }
    .buy:hover{
        background: #ffd9bc;
    }
    .add{
        background-color: #ff4400;
        width: 130px;
        height: 35px;
        color: white;
        margin-left: 6px;
        border-radius: 2px;
    }
    .add:hover{
        background: #f22d00;
    }
    #Right{
        position: absolute;
        left: 628px;
        top: 0;
        width: 500px;
        height: 500px;
        overflow: hidden;
        display: none;
        z-index: 99;
    }
    #Right img{
        height: 200%;
        width: 200%;
        position: absolute;
        left: 0;
        top:0
    }



</style>
